<template>
	<view class="house-facilities">
		<view class="section-title">服务/设施</view>
		<view class="service-content">
			<view class="service-group" v-if="facilities.service && facilities.service.length">
				<view class="service-group-title">服务</view>
				<view class="service-items">
					<view class="service-item" v-for="(item, index) in facilities.service" :key="index">
						<view class="icon-container" :class="item.available ? 'green' : 'red'">
							<image :src="item.available ? 'https://i.ibb.co/1GTpgWQp/15801750740229-pic.png' : 'https://i.ibb.co/Hpxwx8Ct/15811750740240-pic.png'" class="check-icon"></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="service-group" v-if="facilities.basic && facilities.basic.length">
				<view class="service-group-title">基础</view>
				<view class="service-items">
					<view class="service-item" v-for="(item, index) in facilities.basic" :key="index">
						<view class="icon-container" :class="item.available ? 'green' : 'red'">
							<image :src="item.available ? 'https://i.ibb.co/1GTpgWQp/15801750740229-pic.png' : 'https://i.ibb.co/Hpxwx8Ct/15811750740240-pic.png'" class="check-icon"></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="service-group" v-if="facilities.bathroom && facilities.bathroom.length">
				<view class="service-group-title">卫浴</view>
				<view class="service-items">
					<view class="service-item" v-for="(item, index) in facilities.bathroom" :key="index">
						<view class="icon-container" :class="item.available ? 'green' : 'red'">
							<image :src="item.available ? 'https://i.ibb.co/1GTpgWQp/15801750740229-pic.png' : 'https://i.ibb.co/Hpxwx8Ct/15811750740240-pic.png'" class="check-icon"></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="view-all" @click="viewAll">全部设施 ></view>
	</view>
</template>

<script>
export default {
	name: 'houseFacilities',
	props: {
		facilities: {
			type: Object,
			default: () => ({
				service: [],
				basic: [],
				bathroom: []
			})
		}
	},
	methods: {
		viewAll() {
			this.$emit('view-all');
		}
	}
};
</script>

<style lang="scss" scoped>
/* 服务设施 */
.house-facilities {
	padding: 30rpx;
}

.section-title {
	font-size: 34rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	color: #333;
}

.service-group {
	margin-bottom: 30rpx;
}

.service-group-title {
	font-size: 30rpx;
	font-weight: 500;
	margin-bottom: 20rpx;
	color: #333;
}

.service-items {
	display: flex;
	flex-wrap: wrap;
}

.service-item {
	width: 33.33%;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	margin-bottom: 20rpx;
	color: #333;
	line-height: 1;
}

.view-all {
	text-align: right;
	font-size: 26rpx;
	color: #999;
}

.icon-container {
	width: 36rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
	flex-shrink: 0;
}

.check-icon {
	width: 36rpx;
	height: 36rpx;
	display: block;
}
</style> 